<template>
  <div class="common-layout">
    <el-card class="box-card operate-container" shadow="always">
      <el-row>
        <el-col :span="12" style="text-align: left">
          <el-link :underline="false" icon="Document">数据列表</el-link>
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button type="primary" icon="Plus" @click="addMenu">新 增</el-button>
        </el-col>
      </el-row>
    </el-card>
    <div class="table-container">
      <el-table
          :data="menuTreeData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          :default-expand-all="false"
      >
        <el-table-column label="编号" prop="id" align="center"/>
        <el-table-column label="菜单名称" prop="title" align="center"/>
        <el-table-column label="菜单等级" prop="level" align="center"/>
        <el-table-column label="前端名称" prop="name" align="center"/>
        <el-table-column label="前端图标" prop="icon" align="center"/>
        <el-table-column label="是否显示" prop="hidden" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.hidden" :active-value="0" :inactive-value="1"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button :text="true" size="small" type="primary" @click="editMenu(scope.row)">编辑</el-button>
            <el-button :text="true" size="small" type="warning" @click="deleteMenu(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <EditMenu :menuVisible="menuVisible" :menuFrom="menuFrom" :isAdd="isAdd" :menuTreeData="menuTreeData"
            @close="closeMenuDialog"/>
</template>

<script setup lang="ts">
import {reactive, toRefs, ref} from 'vue'
import {getMenuTreeApi} from '../../../request/api/menu'
import EditMenu from '../menu/component/EditMenu.vue'

const state = reactive<{
  menuTreeData: MenuListItf[],
  menuVisible: boolean,
  menuFrom: MenuListItf,
  isAdd: boolean
}>({
  menuTreeData: [],
  menuVisible: false,
  menuFrom: {},
  isAdd: true
})

const {menuTreeData, menuVisible, menuFrom, isAdd} = toRefs(state)


// 获取树形菜单结构
const menuTree = () => {
  getMenuTreeApi().then(res => {
    if (res.code === 200) {
      menuTreeData.value = res.data
    }
  })
}

menuTree()

// 点击编辑按钮
const editMenu = (row: MenuListItf) => {
  isAdd.value = false
  menuFrom.value = row
  menuVisible.value = true
}

// 关闭弹窗
const closeMenuDialog = () => {
  menuVisible.value = false
  menuFrom.value = {}
}

</script>
<style lang="less" scoped>
</style>
